<template>
  <div class="main">
    <div class="form_content">
      <NSpin :show="spinShow">
        <div class="content">
          <NSpace justify="start">
            <NButton type="primary" style="width: 100rem; margin-bottom: 10rem" @click="workDutyAdd">
              新增
            </NButton>
          </NSpace>
          <div class="table">
            <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped />
          </div>
        </div>
      </NSpin>
    </div>
  </div>

  <NModal :auto-focus="false" v-model:show="modalVisible" @close="modalVisible = false">
    <VDialogContent @close="modalVisible = false" @submit="submit" title="删除提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        您确定删除吗？
      </div>
    </VDialogContent>
  </NModal>
</template>
<script setup lang="ts">
import { NDataTable, useMessage, NSpin, NButton, NSpace, NModal } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { ref, h, onMounted } from 'vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { DutyModel } from '@/api/duty'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'

const message = useMessage()
const props = defineProps(['timeDate'])
const emits = defineEmits(['close'])

const columns: DataTableColumns = [
  {
    title: '用户',
    key: 'userName',
    width: 80,
    align: 'center'
  },
  {
    title: '部门',
    key: 'deptName',
    width: 100,
    align: 'center'
  },
  {
    title: '班次',
    key: 'shift',
    width: 100,
    render({ shift }) {
      return shift == 'day' ? '白班' : '晚班'
    },
    align: 'center'
  },
  {
    title: '备注',
    key: 'remark',
    width: 50,
    align: 'center'
  },
  {
    title: '操作',
    key: 'remark',
    width: 100,
    align: 'center',
    fixed: 'right',
    render: (row: any) => [
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          onClick: async () => {
            emits('close')
            router.push({
              path: '/OA/Duty/WorkDutyUpdate',
              query: { id: row.id, flat: true as never }
            })
          }
        },
        {
          default: () => '编辑'
        }
      ),
      h(
        NButton,
        {
          type: 'primary',
          quaternary: true,
          color: '#FD4A29',
          onClick: async () => {
            deleteId.value = row.id
            modalVisible.value = true
          }
        },
        {
          default: () => '删除'
        }
      )
    ]
  }
]
// 新增
const workDutyAdd = () => {
  emits('close')
  router.push({ path: '/OA/Duty/WorkDutyAdd', query: { dutyDate: props.timeDate } })
}
// 删除
const deleteId = ref()
const modalVisible = ref(false)
const submit = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<DutyModel>>({
    module: 'duty',
    api: 'dutyDelete',
    override: {
      data: [deleteId.value]
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success('删除成功')
  modalVisible.value = false
  getWorkDutyInfo()
}
// 获取详情
const tableData: any = ref([])
const spinShow = ref(false)
const getWorkDutyInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<DutyModel>>({
    module: 'duty',
    api: 'dutySchedule',
    override: {
      params: {
        date: props.timeDate
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  tableData.value = res.data
  spinShow.value = false
}

onMounted(() => {
  getWorkDutyInfo()
})
</script>
<style scoped lang="scss">
@mixin CommonFont {
  font-size: 18rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .topTitle {
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #5fb17f;
      margin-bottom: 10rem;
    }

    .content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem;
      background-color: #ebeceb;
      @include CommonFont;

      .table {
        width: 60vw;
        max-height: 400rem;
        height: 400rem;
      }
    }
  }
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
